<template>
  <el-dialog
    :visible.sync="is_show"
    title="评分申诉"
    width="450px"
    @closed="closed"
    center
    append-to-body
  >
    <el-form :model="form" ref="form">
      <el-form-item
        prop="subject"
        label="申诉项目"
        :rules="{required: true, message: '请输入申诉项目', trigger: 'blur'}"
      >
        <el-select v-model="form.subject" multiple placeholder="请选择申诉项目">
          <el-option :disabled="optionDisabled.attitude" label="服务态度分" value="态度"></el-option>
          <el-option :disabled="optionDisabled.quelity" label="撰写质量分" value="质量"></el-option>
          <el-option :disabled="optionDisabled.take_time" label="撰写耗时分" value="撰写耗时"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        prop="remarks"
        label="申诉原因"
        :rules="{required: true, message: '请输入申诉原因', trigger: 'blur'}"
      >
        <el-input
          type="textarea"
          v-model="form.remarks"
          :show-word-limit="true"
          :maxlength="500"
          :rows="4"
        ></el-input>
      </el-form-item>
      <span>申述截图</span>
      <el-upload
        class="upload-demo"
        :action="uploadFileUrl"
        :on-preview="handlePreview"
        :on-remove="pictureRemove"
        :on-success="pictureSuccess"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :before-upload="beforeUpload"
        :file-list="fileList"
      >
        <el-button slot="trigger" class="upload_file">+</el-button>
        <!-- <el-button size="small" type="primary">申述截图</el-button> -->
        <div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/gif/png文件，且不超过10M</div>
      </el-upload>
    </el-form>
    <template slot="footer">
      <el-button @click="is_show = false">取消</el-button>
      <el-button @click="submit" type="primary" v-no-more-click:3000>确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      baseUrl: global.baseurl,
      fileList: [],
      fileListV: [],
      uploadFileUrl: global.baseurl + "/api/upload/file",
      title: "代理人回复",
      is_show: false,
      type: null,
      form: {
        remarks: "",
        subject: ""
      },
      order_id: 0,
      opinion_id: 0,
      optionDisabled: {
        quelity: false,
        attitude: false,
        take_time: false
      }
    };
  },
  methods: {
    beforeUpload(file) {
      let that = this;
      let canUpload = true; //是否能够上传（布尔值）
      let type = file.name.substring(file.name.lastIndexOf(".") + 1);
      //不区分大小写
      if (!/jpg|jpeg|png|gif/i.test(type)) {
        that.$message({
          message: "文件格式只能是jpg/jpeg/png/gif",
          type: "warning"
        });
        canUpload = false;
      }
      let size = file.size / 1024 / 1024;
      if (size > 10) {
        that.$message({
          message: "文件大小不能超过10M",
          type: "warning"
        });
        canUpload = false;
      }
      return canUpload;
    },
    pictureRemove(file, fileList) {
      let that = this;
      //从服务器也删除此文件
      that.$axios.delete("/api/delete/file", {
        data: {
          path: that.fileListV[fileList.length]
        }
      });
      that.fileListV.splice(fileList.length, 1);
    },
    pictureSuccess(res, file, fileList) {
      this.fileListV.push(file);
    //   this.fileListV.push(res.data);
    },
    handlePreview(file) {},
    handleExceed(files, fileList) {
      this.$message.warning("当前限制选择 3 张图片");
    },
    closed() {
      Object.assign(this.$data, this.$options.data());
      this.$refs["form"].resetFields();
    },
    showOn(data) {
      if (data.quelity >= 2.5) {
        this.optionDisabled.quelity = true;
      }
      if (data.attitude >= 2.5) {
        this.optionDisabled.attitude = true;
      }
      if (data.take_time >= 2.5) {
        this.optionDisabled.take_time = true;
      }
      this.order_id = data.id;
      this.is_show = true;
    },
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.fileListV.length != 0){
            var formData = new FormData();
            let subjects = this.form.subject.join(",")
            this.fileListV.forEach((v, i) => {
                if (i == 0) {
                    formData.append("img", v.raw);
                } else {
                    formData.append(`img${i}`, v.raw);
                }
            });
            formData.append("remarks", this.form.remarks)
            formData.append("subject", subjects)
            axios({
                method: "post",
                url: this.baseUrl + `/api/grades/appeals/${this.order_id}`,
                data: formData,
                headers: {
                  "Content-Type": "multipart/form-data",
                  Authorization: "Bearer " + this.$store.state.token
                }
              })
            .then(res => {
            if (res.data.code == 200) {
                this.$message({
                type: "success",
                message: "提交申诉成功"
                });
                this.is_show = false;
                this.$emit("refresh");
            } else {
                this.$message({
                type: "error",
                message: res.data.message
                });
            }
            })
            .catch(e => {
            console.log(e);
            });
          }else{
            let subjects = this.form.subject.join(",");
            let params = {
                remarks: this.form.remarks,
                subject: subjects
            };
            this.$axios
            .post(`/api/grades/appeals/${this.order_id}`, params)
            .then(res => {
            if (res.data.code == 200) {
                this.$message({
                type: "success",
                message: "提交申诉成功"
                });
                this.is_show = false;
                this.$emit("refresh");
            } else {
                this.$message({
                type: "error",
                message: res.data.message
                });
            }
            })
            .catch(e => {
            console.log(e);
            });
          }
          
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  .el-dialog__body {
    padding-bottom: 0;
    padding-top: 0;
  }
  .el-select {
    width: 100%;
  }
}
.upload_file {
  width: 100px;
  height: 100px;
  font-size: 30px;
  color: #b5b5b5;
  background: #fbfdff;
  border: 1px dashed #c0ccda;
}
</style>
